<template>
	<view>
		<view v-if='carts && carts.length == 0' style='padding-top:25vh' @click='toProduct'>
			<u-empty mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png">
			</u-empty>
		</view>
		<view v-else>
			<view style='padding:10px;'>
				<u-icon @click='clearCart' name="trash" color='#909399' labelColor='#909399' label='清空购物车' labelPos='left'></u-icon>
			</view>
			<view class="list" v-for="(item,index) in carts" :key='index'>
				<view v-if='item.show' style="width:100%;border-bottom: solid #F3F3F3 1px;padding-bottom: 10px;">
					<u-row>
						<u-col :span="3" >
							<view v-if='item.cover == null || item.cover == ""' style='max-height:80px'>
								<u--image :showLoading="true" src="/static/logo.jpg" width="80px"
									mode='widthFix'></u--image>
							</view>
							<view v-else style='max-height:80px'>
								<u--image :showLoading="true" :src="item.cover" width="80px" mode='widthFix'></u--image>
							</view>
						</u-col>
						<u-col :span="9">
							<view>
								<view class='name'>
									<text class="product-name">
										{{item.name}}
									</text>
									<text class='sub-title'>({{item.specName}})</text>
								</view>
								<view>
									<view>
										<u-row>
											<u-col span='6'>
												<view>
													<text class='price'>￥{{item.price}}</text>
												</view>
											</u-col>
											<u-col span='6'>
												<view>
													<view v-if='item.quantity > 0'>
														<u-row>
															<u-col span='4'>
																<view class="minus" @click='pev(index)'>
																	<u-icon name="minus" size="12"></u-icon>
																</view>
															</u-col>
															<u-col span='4'>
																<view style="text-align: center;" class="input">
																	{{item.quantity}}
																</view>
															</u-col>
															<u-col span='4'>
																<view class="plus" @click='add(index)'>
																	<u-icon name="plus" color="#FFFFFF"
																		size="12"></u-icon>
																</view>
															</u-col>
														</u-row>
													</view>
													<view v-else>
														<u-row>
															<u-col span='4'>
																<view>
																</view>
															</u-col>
															<u-col span='4'>
																<view style="text-align: center;" class="input">
																</view>
															</u-col>
															<u-col span='4'>
																<view class="plus" @click='add(index)'>
																	<u-icon name="plus" color="#FFFFFF"
																		size="12"></u-icon>
																</view>
															</u-col>
														</u-row>
													</view>
												</view>
											</u-col>
										</u-row>
									</view>
								</view>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view class='footer'>
				<view style='padding:10px'>
					<view style='display:flex;'>
						<view style='width:70%;border-radius: 20px 0px 0px 20px;border: solid #19be6b 1px;color:#19be6b;height:40px;line-height: 40px;text-align: center;'>
							合计:￥{{totalPrice}}
						</view>
						<view style='width:30%;border-radius: 0px 20px 20px 0px;border: solid #19be6b 1px;color:#fff;height:40px;line-height: 40px;text-align: center;background-color: #19be6b;' @click='toUrl("/pages/cart/order")'>
							去结算
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				carts: [],
				totalPrice: 0,
			}
		},
		onLoad() {

		},
		onShow() {
			let carts = uni.getStorageSync('carts')
			for (let i of carts) {
				i.show = true
			}
			if (carts != '') {
				this.carts = carts
				this.getTotalPrice()
				uni.setTabBarBadge({
					index: 2,
					text: `${carts.length}`
				})
			} else {
				uni.removeTabBarBadge({
					index: 2
				})
			}
		},
		methods: {
			clearCart(){
				uni.showModal({
					title: '',
					content: '是否确定清空购物车？',
					success: (data) => {
						if(data.confirm){
							this.carts = [],
							uni.removeStorageSync('carts')
							uni.removeTabBarBadge({
								index: 2
							})
						}
					}
				})
			},
			toProduct() {
				uni.switchTab({
					url: '/pages/products/index'
				})
			},
			add(index) {
				this.carts[index].quantity++
				this.setCart()
			},
			pev(index) {
				this.carts[index].quantity--
				if (this.carts[index].quantity <= 0) {
					this.carts[index].show = false
				}
				this.setCart()
			},
			setCart() {
				let carts = []
				for (let i of this.carts) {
					if (i.quantity > 0) {
						carts.push(i)
					}
				}
				if (carts.length > 0) {
					uni.setStorageSync('carts', carts)
					uni.setTabBarBadge({
						index: 2,
						text: `${this.carts.length}`
					})
				} else {
					uni.removeStorageSync('carts')
					uni.removeTabBarBadge({
						index: 2
					})
				}
				this.getTotalPrice()
			},
			getTotalPrice(){
				let totalPrice = 0
				for(let i of this.carts){
					totalPrice += parseFloat(i.price)*parseInt(i.quantity)
				}
				this.totalPrice = totalPrice.toFixed(2)
			},
			toUrl(page){
				uni.navigateTo({
					url: page
				})
			}
		}
	}
</script>

<style>
	.plus {
		width: 30px;
		height: 30px;
		background-color: #19be6b;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}

	.list {
		margin: 10px;

	}

	.product-name {
		color: #303133;
	}

	.sub-title {
		color: #606266;
	}

	.price {
		color: #ff9900;
	}
	
	.footer{
		position: fixed;
		bottom: 0px;
		width: 100%;
	}
	
	.minus{
		width: 30px;
		height: 30px;
		background-color: #f3f3f3;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
	
	.name {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 15px;
		padding-bottom:10px;
	}
</style>